<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>定时器</button>
    <button class="begin">开启定时器</button>
    <button class="stop">停止定时器</button>
    <script>
        // 1. setTimeout
        // 语法： window.setTimeout(调用函数， 延迟时间)；
        // (1). 这个window 在调用的时候可以省略， 如果省略默认的是0
        // (2).单位： 毫秒  但是可以省略 若省略默认为0
        // (3).在调用函数时，可以是直接写函数  还可以 写 函数名
        // (4). 在同一个页面中可能有很多个定时器，我们经常会给定时器加标识符
        function call() {
            alert('时间到');
        }
        var time = setTimeout(call , 3000); 
        var  btn = document.querySelector('button');
        // 清除定时器setTimeout
        btn.addEventListener('click', function() {
            clearTimeout(time);
        })

        // 2.setInterval
        //  语法： window.setInterval(调用函数， 延时函数)；
        // setInterval(function() {
        //     console.log('调用');
        // },2000)
        // 清除定时器 setInterval
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var time = null;    // 全局变量  null是一个空对象
        begin.addEventListener('click', function() {
            time = setInterval(function() {
                console.log('开启定时器');
            },2000);
        })

        stop.addEventListener('click', function() {
            clearInterval(time);
        })
    </script>
</body>
</html>